<template>
  <div class="comment">
    <div class="comment-type">
      <span :class="navSelect(1)" @click="showList(1)">已显示的</span>
    	<span :class="navSelect(2)" @click="showList(2)">未显示的</span>
    </div>
    <div class="comment-list">
    	<comment-item v-for="comment in commentList" :content="comment" :status="activeStatus" :key="comment.id" @handle="handleComment"></comment-item>
    </div>
    <div class="comment-page">
      <span class="prev-btn" @click="prevBtn()">上一页</span>
      <span class="page-btn" :class="activePage(n)" v-for="n in totalCommentCount" @click="toPage(n)">{{n}}</span>
      <span class="next-btn" @click="nextBtn()">下一页</span>
    </div>
    <div class="comment-save" @click="submitCommentIds">
      <span>保存</span>
    </div>
  </div>
</template>

<script>
  import CommentItem from './CommentItem.vue'

  export default{
    name: 'comment',
    components: {
      'comment-item': CommentItem
    },
    props:["id"],
    data() {
      return {
      	"activeStatus":1,//切换已显示未显示 2|隐藏, 1|显示
        "page":1,
        "size":5,
        "commentList":[],
        "totalCommentCount":0,
        "showIdsList":[],
        "hideIdsList":[]
      };
    },
    computed:{
    },
    created(){
      const status = 1;//默认显示已显示的列表

      this.getList(this.id,status,this.page,this.size);
    },
    methods:{
      getList(id,activeStatus,page,size){//loadCommentList获取跟帖列表
        this.$store.dispatch('loadCommentList',{targetId:id,status:activeStatus,page:page,size:size}).then((data)=>{
            this.commentList = data.commentList;
            this.totalCommentCount = data.count && Math.ceil(data.count/this.size);

            this.commentList.forEach((item)=>{
              item.hasHandle = false;
              if(this.hideIdsList.indexOf(item.id)>-1 || this.showIdsList.indexOf(item.id)>-1){
                item.hasHandle = true;
              }
            });
        });
      },
    	showList(index){
    		this.activeStatus = index;//设置当前显示列表类型   已显示的/未显示的
        this.page = 1;//重置page

        //切换显示tab清空已选中的数组
        this.showIdsList = [];
        this.hideIdsList = [];

        this.getList(this.id,this.activeStatus,this.page,this.size);
    	},
    	navSelect(index){
    		return {
    			"current":this.activeStatus == index
    		}
    	},
      prevBtn(){
        if(this.page > 1){
          this.page = this.page - 1;

          this.getList(this.id,this.activeStatus,this.page,this.size);
        }
      },
      nextBtn(){
        if(this.page < this.totalCommentCount){
          this.page = this.page + 1;

          this.getList(this.id,this.activeStatus,this.page,this.size);
        }
      },
      toPage(index){
        this.page = index;

        this.getList(this.id,this.activeStatus,index,this.size);
      },
      activePage(index) {
        return {
          "active":this.page == index
        }
      },
      submitCommentIds() {
        let ids = [],
            status = 1;
        if(this.activeStatus == 1){//已显示的
          ids = this.hideIdsList;
          status = 2;
        }else if(this.activeStatus == 2){//未显示的
          ids = this.showIdsList;
          status = 1;
        }

        this.$store.dispatch('submitCommentIds',{targetId:this.id,ids:ids,tag:status}).then(()=>{

          this.getList(this.id,this.activeStatus,1,this.size);
        }); 
      },
      handleComment({id,status}) {
        if(status == 1){//当前为显示状态，执行隐藏操作
          if(this.hideIdsList.indexOf(id)>-1){//取消
            let index = this.hideIdsList.indexOf(id);
            this.hideIdsList.splice(index, 1);
          } else{//添加
            this.hideIdsList.push(id);
          } 

          if(this.showIdsList.indexOf(id)>-1){//从另一组里移除
            let index = this.showIdsList.indexOf(id);
            this.showIdsList.splice(index, 1);
          }
        }else if(status == 2){//当前为隐藏状态，执行显示操作
          if(this.showIdsList.indexOf(id)>-1){
            let index = this.showIdsList.indexOf(id);
            this.showIdsList.splice(index, 1);
          } else{
            this.showIdsList.push(id);
          }

          if(this.hideIdsList.indexOf(id)>-1){
            let index = this.hideIdsList.indexOf(id);
            this.hideIdsList.splice(index, 1);
          }
        }
      }
    }
  }
</script>

<style rel="stylesheet/less" lang="less" scoped>
.comment{
	background: #f0f0f0;
	padding: 10px 20px;
	margin-top: 20px;
  animation: fade-in .5s;
	.comment-type{
		margin-bottom: 10px;
		span{
			color: #999999;
			font-size: 16px;
			margin-right: 30px;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-o-user-select: none;
			user-select: none;
			&.current{
				color: #2e9057;
				font-weight: bold;
			}
		}
	}
}

@keyframes fade-in {
  from {
    transform: translate3d(0, -10px, 0);
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.comment-page{
  margin: 20px auto 5px;
  text-align: right;
  span{
    color: #333;
    padding: 0 10px;
    text-decoration: none;
    font-weight: bold;
    color: #999;
    display: inline-block;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    font-family: "黑体";
    &:hover{
      color:#206740;
      font-weight: bold;
    }
    &.active{
      background:#206740;
      border: 1px solid #206740;
      color: #fff;
    }         
  }
}
.comment-save{
  width: 80px;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  background: #2e9057;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  margin: 20px auto;
  text-align: center;
  cursor: pointer;
  transition:.3s;
  span{
    color: #fff;
  }
  &:hover{
    opacity: .8;
  };
}
</style>